Web Images

If you're not familiar, Vector Graphics are essentially graphics created from math formulas. They're basically text documents instructing the computer where to draw lines, curves, shapes, etc. and what colors they should be. This makes vector graphics infinitely scalable. If you've heard of InkScape or Adobe Illustrator, those programs are for creating vector graphics. Most of the icons and illustrations you see on the web are vector graphics. For examples, check out OpenClipart.org

The predominant file format for vector graphics on the web is SVGs (Scalable Vector Graphics). According to caniuse.com, nearly every browser, or 99% of users, supports SVGs going back to Internet Explorer 8 (released all the way back in 2009).

SVGs can be added to your site using the img element just as any other photo. If you have access to the SVG files (or AI files you can convert to SVGs) you should almost always use the SVGs.

One thing to know about SVGs is that different browsers may draw them slightly differently. This is especially true in the case of SVGs containing text. If your SVG contains text, you should make sure it gets converted to an outline before using it, or you run the risk of the text appearing odd in some browsers. Test your SVGs out in a few different browsers before you use them to make sure there are no extreme issues.

Consider the planes above. It's a relatively complex SVG with a variety of shapes and colors. The first image is an SVG. It can be scaled up to infinity without losing quality, it supports transparency, and it's smaller than all the other files saved at 720p.

The other file formats would be smaller if I lowered the quality, or reduced their resolution. However, these are not things I have to worry about with the SVG. Unless I wanted to only display a smaller version of the plane, say 500px in width or less, it really doesn't make sense to go with anything other than SVG here. Some SVGs may be far more complex than this, in which case a traditional image format may be more size appropriate. Considering this SVG is only 60KB to begin with, I'd say it's a no-brainer to use it.

Now examine the SVG with the bird. It's 1.3MB in size because of its high level of complexity. That's far too large for an image. If the SVG is too complex, it may even prevent the page from loading as the browser attempts to draw the thousands of instructions in the SVG. If the SVG is over about 100kb, it probably makes more sense to convert it to an image and just use that instead. Here, the WebP saved at a relatively high resolution is the better choice. If you'd like to see a really complex SVG, look at this vector of the Mona Lisa.

There are a few ways to animate SVGs. First, you can use a program like Adobe Animate or SVGator to animate a scene. These animations rely on Javascript to work. Here's an animation I made with Adobe Animate, it's only 16KB in size.

The other option is to animate SVGs using CSS animations/transforms. Here's the same gear with a simple spin animation accomplished in CSS. This is about 7KB in size between the SVG and the animation CSS.

Note that these are more advanced techniques. Assuming you have an animation ready to go, you can just embed it in your page using an iFrame or by adding the given CSS/JS.